<template>
	<div>
		<van-panel
			class="card display"
			v-for="item of list"
			:key="item.id"
			@click="goFeedbackDetails(item.id, item.is_answer)"
		>
			<template #header>
				<div class="card-left">
					<p class="font-size-14 font-color-343434 div-over-width-2 card-left-content">
						{{ item.content }}
					</p>
					<p class="font-size-12 card-left-status" :style="{ color: item.is_answer ? '#6799F4' : '#EB5F3E' }">
						{{ item.is_answer ? '已回复' : '未回复' }}
					</p>
					<p class="font-size-12 card-left-time">{{ `反馈时间：${item.created_at}` }}</p>
				</div>
				<div class="card-right">
					<van-image width="3.188406rem" height="2.198068rem" :src="item.img_arr && item.img_arr[0]" />
				</div>
			</template>
		</van-panel>
	</div>
</template>

<script>
export default {
	name: 'index',
	props: {
		list: {
			type: Array,
			default: () => {[]},
		},
	},
	components: {},
	data() {
		return {};
	},
	mounted() {},
	methods: {
		goFeedbackDetails(id, is_answer) { //去往反馈详情
			this.$router.push({ path: '/FeedbackRecordDetails', query: { question_id: id, is_answer } });
		},
	},
};
</script>

<style lang="scss" scoped>
.card {
	width: 9.323671rem;
	height: 2.198068rem;
	padding: 0.362319rem 0;
	margin: 0 0.338164rem;

	.card-left {
		width: 5.748792rem;

		p {
			margin: 0;
		}

		.card-left-content {
			margin-top: 0.120773rem;
		}

		.card-left-status {
			margin-top: 0.193237rem;
			color: #eb5f3e;
		}

		.card-left-time {
			margin-top: 0.048309rem;
			color: #757575;
		}
	}

	.card-right {
		height: 100%;
	}

	&::after {
		border-width: 0 0 0.02667rem 0;
	}

	&:last-child::after {
		border-width: 0;
	}
}
</style>
